{% extends "base.html" %}

{% block head_tag_extra_content %}
<link type="text/css" rel="stylesheet" media="all" href="/style/2_column_skeleton.css" />
<link type="text/css" rel="stylesheet" media="all" href="/style/main.css" />
<link rel="stylesheet" type="text/css" href="/style/jquery.boxy/boxy.css" />
<script type='text/javascript' src='/lib/js/jquery.boxy.js'></script>
<script type="text/javascript" src="/js/main.js"></script>
{% endblock head_tag_extra_content %}

{% block body_content %}
<script type="text/javascript">
	// Namespace "listr.main"
	
	// Mapping the KeyPress Events
	$(document).keypress( listr.main.keypressEventHandling );
	
	// Classic init method for jQuery
	$(document).ready( function() {		
		// Adding Modal Box for "New List" button
		$('#new_list_button').click( listr.main.CreateNewListBoxy);

		// Do an Ajax Post to change visibility of Selected Lists to Public
		$('#make_lists_public_button').click( listr.main.ChangeListsVisibilityPublic );
		$('#make_lists_private_button').click( listr.main.ChangeListsVisibilityPrivate );
	});
</script>

<!-- div id="left-column" START -->
<div id="left-column">
	<h1>Current Lists</h1>
	
	<div id="left-column_buttons_top">
		Create a
		<input type="button"
			class="flat-input_element bg-icon_new-right"
			id="new_list_button"
			value="New List" />
	</div>
	
	<div id="current_lists">
		<div id="busy_status">&nbsp;</div>
		{% for current_list in current_lists %}
			{% include "main_current_list-inc.html" %}
		{% endfor %}
	</div>
	
	<div id="left-column_buttons_bottom">
		<!-- TODO: Sort this out -->
		Edit selected Lists:
		<input type="button"
			class="flat-input_element bg-icon_done-right" 
			id=""
			value="Done" />
		<input type="button"
			class="flat-input_element bg-icon_delete-right" 
			id=""
			value="Delete" />
		<input type="button"
			class="flat-input_element bg-icon_public-right" 
			id="make_lists_public_button"
			value="Public" />
		<input type="button"
			class="flat-input_element bg-icon_private-right" 
			id="make_lists_private_button"
			value="Private" />
	</div>
	
	<div id="new_list_hidden_form" style="display: none;">
		<form action="/list/new" method="post" style="text-align: center; ">
		<input name="title"
			id="new_list_hidden_form_title"
			type="text"
			style="width: 300px; font-size: 130%; text-align: center; "/>
		</form>
	</div>
	
</div> <!-- div id="left-column" END -->

<!-- div id="right-column" START -->
<div id="right-column">
	<h1>Done Lists</h1>
	<h2>Last 10 Completed</h2>
	
	{% for done_list in done_lists %}
		{% include "main_done_list-inc.html" %}
	{% endfor %}
	 
	<div id="right-column_buttons">
		<a href="#">See all the Done Lists</a>
	</div>     
</div> <!-- div id="right-column" END -->
{% endblock body_content %}